<div class="content-banner">
  <div class="bg-image">
    <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
  >
    {%- if section.settings.image != blank -%}
      <img
        srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
          {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
          {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
          {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
          {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
          {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
          {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
        src="{{ section.settings.image | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
        alt="{{ section.settings.image.alt | escape }}"
        loading="lazy"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.height }}"
      >
    {%- else -%}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
    </div>
    <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
  >
    {%- if section.settings.image_mobile != blank -%}
      <img
        srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
          {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
        src="{{ section.settings.image_mobile | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
        alt="{{ section.settings.image_mobile.alt | escape }}"
        loading="lazy"
        width="{{ section.settings.image_mobile.width }}"
        height="{{ section.settings.image_mobile.height }}"
      >
    {%- else -%}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
    </div>
  </div>
  {% if section.settings.text != blank %}
  <div class="twy-text">
    <div class="page-width">
        <div class="text">{{ section.settings.text }}
          {% if section.settings.text_1 != blank %}
            <span class="text_1"> {{ section.settings.text_1 | escape }}</span>
          {% endif %} 
          {% if section.settings.html != blank %}
            {{ section.settings.html }}
           {% endif %} 
          </div>
        {% if section.settings.richtext %}
            {{ section.settings.richtext }}
        {% endif %}
    </div>
</div>
  {% endif %}
  <div class="twy-content">
     <div class="page-width">
      <ul class="grid grid--3-col-tablet">
          {%- for block in section.blocks -%}
            <li class="multicolumn-list__item">
               <div class="tenways_page-list">
                {%- if block.settings.html != blank -%}
                <div class="text">{{ block.settings.html }}</div>
                {%- endif -%}
    
              {%- if block.settings.text != blank -%}
              <div class="richtext">{{ block.settings.text }}</div>
               {%- endif -%}

               {%- if block.settings.button_label != blank -%}
               <a{% if block.settings.button_link != blank %} target="_blank" href="{{ block.settings.button_link }}"{% endif %} class="tenways_button-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                 {{ block.settings.button_label | escape }}
               </a>
             {%- endif -%}
            </div>

            <div class="twy-buttom">
              {%- if block.settings.title != blank -%}
              <div class="twy_title">{{ block.settings.title }}</div>
               {%- endif -%}
              {%- if block.settings.note != blank -%}
              <div class="note">{{ block.settings.note }}</div>
               {%- endif -%}
            </div>
              
            </li>
          {%- endfor -%}
      </ul>
     </div>
  </div>
</div>


{% schema %}
{
"name": "Banner content",
"tag": "section",
"class": "spaced-section spaced-section--full-width banner-content tenways_margin-content",
"settings": [
  {
    "type": "image_picker",
    "id": "image",
    "label": "t:sections.image-banner.settings.image.label"
  },
  {
    "type": "image_picker",
    "id": "image_mobile",
    "label": "Mobile image"
  },
  {
      "type": "text",
      "id": "text",
      "label": "Text"
  },
  {
      "type": "text",
      "id": "text_1",
      "label": "Text 1"
  },
  {
      "type": "html",
      "id": "html",
      "label": "html"
  },
  {
      "type": "richtext",
      "id": "richtext",
      "label": "Richtext"
  }
],
"blocks": [
  {
      "type": "about",
      "name": "about",
      "settings": [
      {
          "type": "html",
          "id": "html",
          "label": "Icon"
      },
      {
          "type": "text",
          "id": "text",
          "label": "Text"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label",
        "info": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title"
    },
      {
        "type": "text",
        "id": "note",
        "label": "note"
    }
    ]
  }
],
"presets": [
{
  "name": "Banner content"
}
]
}
{% endschema %}
